<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        #content {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            bottom: 0px;
        }

        #drag {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            left: 30px;
            top: 30px;
        }
    </style>

</head>
<!-- ondragover 拖动过程中触发 -->
<!-- ondrop 释放触发 -->
<!-- ondragstart 开始拖动触发 -->

<body>
    <div id="content" @dragover="allowDrop($event)" @drop="drop($event)">
        <div id="drag" draggable="true" @dragstart="drag($event)"></div>
    </div>
    <script src="./js/vue2.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#content",
            methods: {
                allowDrop(ev) {
                    console.log('没放手')
                    ev.preventDefault();
                },
                drag(ev) {
                    console.log('开始拖')
                },
                drop(ev) {
                    console.log('放手')
                    console.log(ev.clientX, ev.clientY)
                    document.getElementById("drag").style.left = ev.clientX - 25 + 'px'
                    document.getElementById("drag").style.top = ev.clientY - 25 + 'px'
                }
            }
        })
    </script>
</body>

</html>
